<!DOCTYPE HTML>
<html class="no-js" lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="theme/kying/common :: head(~{::title})">
    <title th:text="|${blog.title} - ${webname} - 从前的日子很慢，车马邮件都很慢，一生只够爱一个人|"></title>
</head>
<body>
<!--头部 nav-->
<span th:replace="theme/kying/common :: nav"></span>

<div id="pjax-container">
    <style>
        #header {
            height: 70vh;
        }

        @media (max-width: 768px) {
            #header {
                height: 40vh;
            }
        }

        #site-meta {
            display: none;
        }
    </style>

    <header id="header" class="clearfix animated fadeInDown">
        <div id="site-meta">
            <h1 id="site-name" th:text="${webname}">San'Sui Blog</h1>
            <h2 id="site-description" th:text="${webTitle}">San'Sui Blog</h2>
        </div>
        <div id="background"></div>
    </header><!-- end #header -->

    <div id="body" class="animated fadeIn">
        <div class="container">
            <div class="row">
                <div id="main" class="col-mb-12 col-8 col-offset-2">
                    <article class="post" itemscope>
                        <div class="post-header">
                            <h3 class="post-title">
                                <a href="#" class="post-link"
                                   th:href="@{/blogs/{id}(id=${blog.blogId})}"
                                   th:text="${blog.title}">
                                    三岁博客
                                </a>
                            </h3>
                            <div class="post-meta">
                                <span class="post-meta-label post-meta-views"><span th:text="${blog.views}">777</span>次阅读</span>
                                <span class="post-meta-label post-meta-cate">
                                    <a href="#" th:text="${blog.typesName}">默认</a>
                                </span>
                                <span class="post-meta-label post-meta-date"
                                      th:text="${#dates.format(blog.createTime,'yyyy-MM-dd')}">2019-02-21</span>
                            </div>
                        </div>
                        <div class="post-body">
                            <div class="post-content">
                                <!--文章内容-->
                                <span th:utext="${blog.content}"></span>

                                <!--转载说明-->
                                <div id="sc_warn" th:if="${blog.shareStatement}">
                                    <b>本文作者</b>：<span th:text="${blog.createUser}"></span><br/>
                                    <b>本文链接</b>：<span id="local-url"></span><br/>
                                    <b>转载说明</b>：本文采用
                                    <span>
                                        <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a>
                                        协议许可 ，文章内容仅代表个人观点，转载请附上原文！
                                    </span>
                                </div>
                            </div>
                            <div class="post-other">
                                <div class="post-reward" th:if="${blog.appreciation}">
                                    <a href="javascript:void(0);" onclick="togglePostOther(this);" no-pjax="">
                                        <i class="iconfont icon-aria-reward"></i>
                                    </a>
                                    <ul>
                                        <li>
                                            <img no-lazyload="" src="https://blog.jun-mou.top/images/wx.jpg">Wechat
                                        </li>
                                    </ul>
                                </div>
                                <div class="post-qrcode">
                                    <a href="javascript:void(0);" onclick="togglePostOther(this);" no-pjax="">
                                        <i class="iconfont icon-aria-qrcode"></i>
                                    </a>
                                    <div>
                                        <span>
                                            <b>手机上阅读</b>
                                            <!--                                            <img no-lazyload="" src="">-->
                                            <span id="qrcode" no-lazyload=""></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="post-update"><i class="iconfont icon-aria-date"></i>&nbsp;最后一次更新于
                                <span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}"></span>
                            </div>
                        </div>

                        <div class="post-tags">
                            <a href="#" th:text="${blog.tagsName}">标签</a>
                            <a class="post-zan">
                                <i class="iconfont icon-aria-like"></i>
                            </a>
                        </div>

                        <!--翻页-->
                        <div class="post-footer nextprev" id="blog-pageChange">
                            <div class="post-footer-box half previous"  th:classappend="${#lists.isEmpty(blogs.nextBlog) } ? 'me'" th:if="${#arrays.length(blogs.perBlog)}>0">
                                <a href="#" rel="prev" th:each="perBlog:${blogs.perBlog}" th:href="@{/blogs/{id}(id=${perBlog.blogId})}" target="_blank">
                                    <div class="post-footer-thumbnail">
                                        <img src="#" th:src="@{${perBlog.blogImg}}">
                                    </div>
                                    <span class="post-footer-label">Previous Post</span>
                                    <div class="post-footer-title"><h3><span th:text="${perBlog.title}"></span></h3></div>
                                </a>
                            </div>
                            <div class="post-footer-box half next" th:classappend="${#lists.isEmpty(blogs.perBlog)} ? 'me'" th:if="${#arrays.length(blogs.nextBlog)}>0">
                                <a href="#" rel="next" th:each="nextBlog:${blogs.nextBlog}" th:href="@{/blogs/{id}(id=${nextBlog.blogId})}" target="_blank">
                                    <div class="post-footer-thumbnail">
                                        <img src="#" th:src="@{${nextBlog.blogImg}}">
                                    </div>
                                    <span class="post-footer-label">Next Post</span>
                                    <div class="post-footer-title"><h3><span th:text="${nextBlog.title}"></span></h3></div>
                                </a>
                            </div>
                        </div>
                    </article>
                    <!--评论-->

                    <div id="comments" th:if="${blog.commentabled}">
                        <div id="comment-container" th:fragment="commentList">
                            <span id="response">
                                <p>
                                    <i class="iconfont icon-aria-comment"></i>
                                    <span th:text="${commentNum}"></span> 条评论
                                </p>
                            </span>
                            <!--评论内容-->
                            <div class="comment-data">
                                <ol class="comment-list" th:each="comment : ${comments}">
                                    <li th:id="'li-comment-'+${comment.commentid}" th:classappend="${comment.admincomment} ? 'comment-by-author'" class="comment-body comment-parent comment-odd">
                                        <div th:id="'comment-'+${comment.commentid}">
                                            <a class="comment-avatar" href="#" target="_blank" th:href="${comment.url}">
                                                <img class="avatar" src="" th:src="@{${comment.avatar}}" alt="White" width="120" height="120"/>
                                            </a>
                                            <div class="comment-content">
                                                <div class="comment-text">
                                                    <span class="comment-reply" style="float:right">
                                                        <a rel="nofollow" title="回复" class="reply" data-commentid="1" data-commentnickname="sansui"
                                                           th:attr="data-commentid=${comment.commentid},data-commentnickname=${comment.nickname}"
                                                           onclick="reply(this)">
                                                            <i class="iconfont icon-aria-reply"></i>
                                                        </a>
                                                    </span>
                                                    <p><p th:text="${comment.comment}">评论内容</p></p>
                                                </div>
                                                <p class="comment-meta">
                                                    By <span>
                                                      <a href="#" th:href="${comment.url}" rel="external nofollow" target="_blank" th:text="${comment.nickname}">sansui</a>
                                                    </span>
                                                    <!--评论时间-->
                                                    <span th:text="${#dates.format(comment.createtime,'yyyy-MM-dd HH:mm')}"></span>
                                                    <span class="comment-ua">
                                                            来自 <span th:text="${comment.sourcecity}">火星</span>
                                                    </span>
                                                </p>
                                            </div>
                                        </div><!-- 单条评论者信息及内容 -->

                                        <!--子评论-->
                                        <div class="comment-children" th:if="${#arrays.length(comment.replyComments)}>0">
                                            <ol class="comment-list" th:each="reply : ${comment.replyComments}">
                                                <li th:id="'li-comment-'+${reply.commentid}" th:classappend="${reply.admincomment} ? 'comment-by-author'" class="comment-body comment-child comment-level-odd comment-odd">
                                                    <div th:id="'comment-'+${reply.commentid}">
                                                        <a class="comment-avatar" target="_blank" href="#" th:href="${reply.url}">
                                                            <img class="avatar" th:src="@{${reply.avatar}}" src="#" alt="sansui" width="120" height="120"/>
                                                        </a>
                                                        <div class="comment-content">
                                                            <div class="comment-text">
                                                                <span class="comment-reply" style="float:right">
                                                                    <a class="reply" rel="nofollow" data-commentid="1"
                                                                       title="回复"
                                                                       data-commentnickname="Matt"
                                                                       th:attr="data-commentid=${reply.commentid},data-commentnickname=${reply.nickname}"
                                                                       onclick="reply(this)">
                                                                        <i class="iconfont icon-aria-reply"></i>
                                                                    </a>
                                                                </span>
                                                                <p>
                                                                    <a href="#comment-5" th:href="'#comment-'+${comment.commentid}" >
                                                                        <span th:text="|@ ${reply.parentnickname}|">@小白</span>
                                                                    </a>
                                                                    <br>
                                                                    <p th:text="${reply.comment}">评论内容</p>
                                                                </p>
                                                            </div>
                                                            <p class="comment-meta">By
                                                                <span>
                                                                    <a href="#" th:href="${reply.url}" rel="external nofollow" target="_blank" th:text="${reply.nickname}">sansui</a>
                                                                </span>
                                                                <span th:text="${#dates.format(reply.createtime,'yyyy-MM-dd HH:mm')}"></span>
<!--                                                                <span class="comment-ua">-->
<!--                                                                    <i class="iconfont icon-aria-windows"></i>&nbsp;-->
<!--                                                                    <i class="iconfont icon-aria-chrome"></i>-->
<!--                                                                </span>-->
                                                                <span class="comment-ua">
                                                                    来自 <span th:text="${reply.sourcecity}">火星</span>
                                                                </span>
                                                            </p>
                                                        </div>
                                                    </div><!-- 单条评论者信息及内容 -->
                                                </li>
                                            </ol>
                                        </div><!--子评论结束-->
                                    </li>
                                </ol>
                            </div>
                        </div><!--评论内容区域结束-->

                        <div id="page-nav">
                        </div>

                        <div id="comment-form-1" class="respond">
                            <div class="cancel-comment-reply">
                                <a id="cancel-comment-reply-link"
                                   rel="nofollow"
                                   title="清空"
                                   style="display:none"
                                   onclick="cancelReply()">
                                    <i class="iconfont icon-aria-cancel"></i>
                                </a>
                            </div>

                            <input type="hidden" name="blogId" th:value="${blog.blogId}">
                            <input type="hidden" name="parentComment.id" value="-1">
                            <span id="new-response">
                                <i class="iconfont icon-aria-write"></i> 添加新评论(邮箱请认真填写，便于接收评论提醒)
                            </span>
                            <!-- New Comments begin -->
                            <div id="comment-form" role="form">
                                <div id="comment-info">
                                    <p>
                                        <img no-lazyload id="commentavatar" th:src="${session.user}!=null?@{${userInfo.avatars}}:@{/images/avatar.svg}" src="#">
                                    </p>
                                    <p class="comment-input">
                                        <label for="commentQQ"
                                               class="required">
                                            <i class="iconfont icon-aria-qq"></i>
                                        </label>
                                        <input placeholder="（必填）QQ"
                                               type="text"
                                               name="qq"
                                               id="commentQQ"
                                               class="text"
                                               value=""
                                               th:id="${session.user}!=null?'':'commentQQ'" th:value="${session.user}!=null ? ${userInfo.qq}"
                                               required/>
                                    </p>
                                    <p class="comment-input">
                                        <label for="nickname"
                                               class="required">
                                            <i class="iconfont icon-aria-username"></i>
                                        </label>
                                        <input placeholder="（必填）昵称"
                                               type="text"
                                               name="nickname"
                                               id="nickname"
                                               class="text"
                                               th:value="${session.user}!=null ? ${userInfo.nickname}"
                                               value=""
                                               required/>
                                    </p>
                                    <p class="comment-input">
                                        <label for="email"
                                               class="required">
                                            <i class="iconfont icon-aria-email"></i>
                                        </label>
                                        <input placeholder="（必填）邮箱"
                                               type="email"
                                               name="email"
                                               id="email"
                                               class="text"
                                               th:value="${session.user}!=null ? ${userInfo.email}"
                                               value=""
                                               required>
                                    </p>
                                    <p class="comment-input">
                                        <label for="url">
                                            <i class="iconfont icon-aria-link"></i>
                                        </label>
                                        <input type="url"
                                               name="url"
                                               id="url"
                                               class="text"
                                               placeholder="（选填）网站"
                                               value=""/>
                                    </p>
                                </div>
                                <div style="float:right">
                                    <i class="iconfont icon-aria-markdown"></i>
                                    <span style="font-style:italic;font-size:13px;color:#444"> Markdown is supported.</span>
                                </div>
                                <!--评论框-->
                                <div class="field">
                                    <textarea name="comment" id="comment" placeholder="「你的评论可以一针见血...」"></textarea>
                                </div>
                                <!--                                <div id="comment-footer">-->
                                <!--                                    <div class="OwO">-->
                                <!--                                    </div>-->
                                <!--                                    &lt;!&ndash;end .OwO&ndash;&gt;-->
                                <!--                                    <div class="comment-image"-->
                                <!--                                         onclick="document.getElementById('textarea').value+='![图片描述](图片地址)' ">-->
                                <!--                                    <span>-->
                                <!--                                        <i class="iconfont icon-aria-picture"></i>图片-->
                                <!--                                    </span>-->
                                <!--                                    </div>-->
                                <!--                                </div>-->
<!--                                <p>-->
<!--                                <center>-->
<!--                                    <img src="#"-->
<!--                                         alt="captcha"-->
<!--                                         onclick="this.src = this.src + '?' + Math.random()"-->
<!--                                         style="cursor: pointer"-->
<!--                                         title="点击图片刷新验证码"-->
<!--                                         no-lazyload/>-->
<!--                                </center>-->
<!--                                <input placeholder="请输入图片中6位验证码（不区分大小写）" type="text" class="captcha" name="captcha_code"/>-->
<!--                                </p>-->
                                <center>
                                    <button type="submit" id="commentpost-btn" class="submit">
                                        <i class="iconfont icon-aria-submit"></i>提交
                                    </button>
                                </center>
                            </div>
                        </div>
                    </div>


                </div><!-- end #main-->
                <div class="col-mb-12 col-2 kit-hidden-tb">
                    <div id="toc-container">
                        <div id="toc"></div>
                    </div>
                </div>
            </div><!-- end .row -->
        </div><!-- end .container -->
    </div><!-- end #body -->
</div><!-- end #pjax-container -->

<!--回到顶部-->
<div th:replace="theme/kying/common :: go-top"></div>
<!--底部-->
<footer th:replace="theme/kying/common :: footer"></footer>


<!--/*/<th:block th:replace="theme/kying/common :: script">/*/-->

<!--/*/</th:block>/*/-->
<script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
<script>

    function reply(obj) {
        var commentId = $(obj).data("commentid");
        var commentName = $(obj).data("commentnickname");
        $("[name='comment']").attr("placeholder", "@" + commentName).focus();
        $("[name='parentComment.id']").val(commentId);
        $("#cancel-comment-reply-link").css("display","");
        $(window).scrollTo($("#comment"), 500);
    }

    function cancelReply(){
        $("[name='comment']").attr("placeholder", "「你的评论可以一针见血...」").focus();
        $("[name='parentComment.id']").val("-1");
        $("[name='comment']").val('');
        $("#cancel-comment-reply-link").css("display","none");
    }

    $(function () {
        var url = window.location.href; /* 获取完整URL */

        $("#local-url").text(url);
        var qrcode = new QRCode("qrcode", {
            text: "" +url+ "",
            width: 110,
            height: 110,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H
        });

        $("#comment-container").load("[[@{/blogs/comments/{blogId}(blogId=${blog.blogId})}]]");

        $("#commentQQ").blur(function () {
            if ($("#commentQQ").val() == '' || $("#commentQQ").val() == null) {
            } else {
                $("input[name='nickname']").attr("disabled", "");
                $("input[name='email']").attr("disabled", "");

                $.ajax({
                    url: '/blogs/getAvatar',
                    type: 'post',
                    data: {'qq': $("#commentQQ").val()},
                    success: function (suc) {
                        if (suc.code == 200) {
                            $("#commentavatar").val(suc.data.imgurl);
                            $("#commentavatar").attr("src", suc.data.imgurl);
                            $("input[name='nickname']").val(suc.data.name);
                            $("input[name='email']").val(suc.data.qemail);
                        }
                        $("input[name='nickname']").removeAttr("disabled");
                        $("input[name='email']").removeAttr("disabled");
                    }, error(jqXHR, textStatus, errorThrown) {
                        // 错误信息处理
                        console.error(textStatus, errorThrown)
                    }
                });
            }
        });


        $('#commentpost-btn').click(function () {

            var commentQQ = $("input[name='qq']").val();
            var nickname = $('#nickname').val();
            var email = $('#email').val();
            var comment = $("#comment").val();

            var pattqq = new RegExp("^\\d{5,10}$");
            var pattEmail = new RegExp("\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*");

            if (commentQQ == '' || commentQQ == null || !pattqq.test(commentQQ)) {
                layer.tips('请正确输入QQ号码', '#commentQQ', {
                    tips: [1, '#0FA6D8']
                });
                return false;
            }
            if (nickname == '' || nickname == null){
                layer.tips('请正确输入昵称', '#nickname', {
                    tips: [1, '#0FA6D8']
                });
                return false;
            }
            if (email == '' || email == null || !pattEmail.test(email)){
                layer.tips('请正确输入邮箱', '#email', {
                    tips: [1, '#0FA6D8']
                });
                return false;
            }

            if (comment == '' || comment == null || !comment.trim()) {
                layer.tips('亲，说点什么吧', '#comment', {
                    tips: [1, '#0FA6D8']
                });
                return false;
            }
            $("#commentpost-btn").attr("disabled", "");
            postData();
        });


        function postData() {
            $("#comment-container").load("[[@{/blogs/comments}]]", {
                "parentcommentid": $("[name='parentComment.id']").val(),
                "blogId": $("[name='blogId']").val(),
                "qq": $("input[name='qq']").val(),
                "nickname": $("input[name='nickname']").val(),
                "email": $("input[name='email']").val(),
                "avatar": $("#commentavatar").val(),
                "url": $('#url').val(),
                "comment": $("[name='comment']").val()
            }, function (responseTxt, statusTxt, xhr) {
                if(xhr.status==200){
                    $("#commentpost-btn").removeAttr("disabled");
                    if($("[name='parentComment.id']").val()>-1){
                        let n = $("[name='parentComment.id']").val();
                        $(window).scrollTo($("#comment-"+$("[name='parentComment.id']").val()), 500);
                    }else{
                        $(window).scrollTo($("#comment-container"), 500);
                    }
                    layer.msg('评论成功',{icon: 6});
                }else{
                    layer.msg('评论失败',{icon: 5});
                }
                clearContent();
            })
        }

        function clearContent() {
            $("[name='comment']").val('');
            $("[name='parentComment.id']").val(-1);
            $("[name='comment']").attr("placeholder", "你的评论可以一针见血...");
        }


    });

</script>
</body>
</html>